/*
---------------------------------
---- Small Screen Formatting ----
---------------------------------
*/
@media screen and (max-height: 900px) {

  /*
    ---------------------
    ---- Diagnostics ----
    ---------------------
  */
  #devDiagnostics {
    font-size: 6pt;
    line-height: 95%;
  }
  #devDiagnostics h3 {
    font-size: 6pt;
    word-break: break-all;
    word-wrap: break-word;
  }

  #devDiagnostics ul {
  }
  #devDiagnostics ul li {
    /* font-size: 6pt; */
  }
  #devDiagnostics ul li::before {
    font-size: 6pt;
    width: 5.5em;
    text-align: right;
    display: inline-block;
    padding-right: .25ex;
  }

  .currentStyle::before {
    content: "less than 900p";
  }
  .currentStyle {
    margin-bottom: .5ex;
    border-bottom-style: solid;
    border-bottom-color: var(--bgCard);
    border-bottom-width: .25ex;
  }

  #voteStatus {
    font-size: 6pt;
  }

  .sideBar {
    padding: .25ex;
  }
  .sideBar h3 {
    font-size: 6pt;
  }
  #popParticipants {
    font-size: 10pt;
  }
  .smallButton {
    font-size: 8pt;
    line-height: 90%;
  }

  /*
    ---------------------
    ---- Main Styles ----
    ---------------------
  */
  body {
    font-size: 11pt;
  }

  header {
    width: 4em;
    padding-left: 0ex;
    margin-top: .5ex;
    height: 100vh;
  }
  header h1 {
    font-size: 14pt
  }
  header h2 {
    font-size: 12pt;
  }
  nav {

  }
  button {
    font-size: 10pt;
  }
  .mainButton {
    width: 3.75em;
    padding: .5ex;
    margin-left: 0ex;
    margin-right: 0ex;
  }

  main {
    left: 5em;
    width: calc(100% - 6em);
  }

  .dialogue h1 {
    font-size: 16pt;
  }
  .dialogue h2 {
    font-size: 14pt;
  }
  .dialogue h3 {
    font-size: 12pt;
  }

  .scale {
    /* width: 5%; */
    line-height: 110%;

    overflow-x: hidden;
    min-width: 3em;
  }
  .scale div {
    font-size: 100%;
    padding: 1ex;
  }
  .scale div:nth-child(2) {
    min-width: calc(100% - 3ex);
  }

  #dialogueEditGames .dialogue {
    margin-top: calc((-90vh/2) + -1em);
    margin-left: calc(-90vw/2);
    width: 90vw;
    max-height: 90vh;
  }
  #diaGameDetails div div textarea {
    font-size: 11pt;
  }

  .cardCollapseControl {
    top: 10vh;
    font-size: 100%;
    width: 10%;

  }
  .cardCollapseControl button {

  }




}

@media screen and (max-width: 50em) {
  /* Mobile portrait mode */

  /*
    ---------------------
    ---- Diagnostics ----
    ---------------------
  */
  #devDiagnostics {
  }
  #devDiagnostics h3 {
    font-size: 10pt;
    word-break: break-all;
  }
  .currentStyle::before {
    content: "less than 50em W";
  }

  .smallButton {
    font-size: 8pt;
    line-height: 90%;
  }
  .sideBar {
    padding: .25ex;
  }
  #popRegister {
    margin-left: -.25ex;
  }

  /*
    ---------------------
    ---- Main Styles ----
    ---------------------
  */

  body {
      font-size: 10pt;
      /* color: blue; */
      margin: .5ex;
      width: 100vw;
  }
  header {
    width: 4em;
    padding-left: 0ex;
    margin-top: .5ex;
    height: 100vh;
  }
  header h1 {
    font-size: 12pt
  }
  header h2 {
    font-size: 11pt;
  }
  nav {

  }
  button {
    font-size: 9pt;
  }
  .mainButton {
    width: 3.75em;
    padding: .5ex;
    margin-left: 0ex;
    margin-right: 0ex;
  }
  main {
    /* background-color: blue; */
    /* filter: brightness(150%); */
    left: 4.5em;
    width: calc(100% - 5.25em);
  }
  .container {

  }

  ul {

  }

  .scale {

    width: 5%;
    line-height: 75%;

    overflow-x: hidden;
    min-width: 3em;

  }
  .scale div {
    /* padding: 1em;

    text-align: center;
    font-size: 120%; */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 1ex;
    /* display: none; */
  }
  .scale div:first-child {
    /* margin-bottom: 100%; */
    /* padding-bottom: 0px; */
  }
  .scale div:nth-child(2) {
    /* background-color: blue; */
    /* height: calc(100% - 4em); */
    /* position: absolute;
    bottom: 4em;
    top: 4em;

    vertical-align: middle;

    min-width: calc(100% - 3em); */
    min-width: 0em;
  }
  .scale div:nth-child(2) P {
    /* position: absolute;
    top: 50%;
    transform: translate(0, -50%); */
    margin: 1ex;
  }
  .scale div:last-child {
    /* margin-top: 100%; */
    /* padding-top: 0px;
    position: absolute;
    bottom: 1em;
    width: calc(100% - 2em); */
  }

  .gameCards {
    /* padding: 1ex;
    padding-top: 0ex;
    padding-bottom: 0ex;
    margin: 0px;
    /* list-style: none; */

    width: 99%;
    /* min-width: 90%;
    max-width: ; */
  }
  .gameCards ul {
    flex-direction: column;
  }
  .gameCards ul li {
    width: inherit;
  }
  /* Game Name */
  .gameCards ul li:nth-child(1) {
    width: inherit;
  }
  .gameCards ul li:nth-child(1) .pts {

  }
  /* GM Name */
  .gameCards ul li:nth-child(2) {

  }
  /* Game System */
  .gameCards ul li:nth-child(3) {

  }
  .gameCards ul hr {

  }
  /* Pitch - Story */
  .gameCards ul li:nth-child(5) {
    width: calc(100% - 6.5em);
  }
  /* Pitch - Style */
  .gameCards ul li:nth-child(6) {
    width: calc(100% - 6.5em);
  }

  .cardCollapseControl {
    /* background-color: pink; */
    width: 5%;
    min-width: 3em;
    top: 12vh;
    /* height: 16em; */
  }
  .cardCollapseControl button {
    /* transform: rotate(-90deg); */
    transform-origin: top;

    position: relative;
    top: 0;
    left: 0;
    min-width: 80%;

    /* margin-left: calc(-50% - 1.33em); */
    margin-right: 2.5%;
    margin-top: 1em;
    margin-bottom: 2em;

    font-size: 80%;
  }


  /*
    -------------------
    ---- Dialogues ----
    -------------------
  */
    /*
      ----------------------
      ---- Vote Confirm ----
      ----------------------
    */
    #dialgueConfirm .dialogue {
      /* background-color: red; */
      top: 2vh;
      left: 2vw;

      width: calc(96vw - 2em);
      max-height: calc(96vh - 2em);

      margin: 0%;
      /* padding: 0%; */
    }

    /*
      ----------------------------
      ---- Dialogue Game Edit ----
      ----------------------------
    */
    #dialogueEditGames .dialogue {
      top: 2vh;
      left: 2vw;

      width: calc(96vw - 2em);
      /* max-height: calc(96vh - 2em); */
      max-height: 50vh;

      margin: 0%;
    }

    textarea {
      transition: .3s;
      /* font-size: 10pt; */
    }
    textarea:focus {
      position: fixed;
      top: 4vh;
      left: .5vw;

      width: 94vw !important;
      transition: .3s;
    }
    input {
      transition: .3s;
      /* font-size: 10pt; */
    }
    input:focus {
      position: fixed;
      top: 4vh;
      left: .5vw;

      width: 94vw !important;
      transition: .3s;
    }

    #diaGameList {
      /* height: 50vh; */
    }

    #diaGameDetails {
      /* height: 50vh; */
      overflow: scroll;
    }
    #diaGameDetails div div {
      margin: .25ex;
    }
    #diaGameDetails div div h3 {
      font-size: 10pt;
    }
    #diaGameDetails div div textarea {
      font-size: 10pt;
    }
    #diaGameDetails div div textarea {
      height: 2em
    }
    #diaGameDetails div div:nth-child(5) textarea {
      height: 2em
    }
    #diaGameDetails div div:nth-child(5) textarea:focus {
      height: 8em;
    }
    #diaGameDetails div div:nth-child(6) textarea {
      height: 2em;
    }
    #diaGameDetails div div:nth-child(6) textarea:focus {
      height: 8em;
    }
    #diaGD_Code {
      font-size: 10pt;
    }

    /*
      --------------------------
      ---- Dialogue Results ----
      --------------------------
    */

    #dialogueResults .dialogue {
      top: 2vh;
      left: 2vw;

      width: calc(96vw - 2em);
      /* max-height: calc(96vh - 2em); */
      max-height: 50vh;

      margin: 0%;
    }

    /*
      --------------------------
      ---- Dialogue Pop Register ----
      --------------------------
    */

    #dialoguePopRegister .dialogue {
      margin-left: calc(-95vw/2);
      width: 88vw;
    }
    #dialoguePopRegister .dialogue div:first-child {

    }
    #dialoguePopRegister .dialogue div:first-child h1 {
      font-size: 14pt;
    }
    #diaPop_NewName {
      font-size: 10pt;
    }
    #diaPop_Code {
      font-size: 10pt;
    }

}

/*
-------------------------------------------------------
---- Bigger, mostly portrait devices, like tablets ----
-------------------------------------------------------
*/
@media screen and (max-width: 70em) and (min-width: 50em){
  /* Bigger mobile devices */

  /*
    ---------------------
    ---- Diagnostics ----
    ---------------------
  */


  /*
    ---------------------
    ---- Main Styles ----
    ---------------------
  */
  body {
    /* background-color: darkgreen; */
    font-size: 11pt;
  }

  main {
    width: calc(100vw - 8.66em);
  }

  .container {

  }

  .cardCollapseControl {
    width: 5.66em%;
  }
  .cardCollapseControl {
    font-size: 11pt;
  }

  .sideBar h3 {
    font-size: 10pt;
  }

  #popParticipants {
    font-size: 10pt;
  }

  /*
    --------------------------
    ---- Dialogue Pop Register ----
    --------------------------
  */

  #dialoguePopRegister .dialogue {
    margin-left: calc(-80vw/2);
    width: 80vw;
  }

}

@-ms-viewport{
  width: device-width;
}